<style>
    #user-money {
        padding: 20px 25px 25px 0;
    }

    #user-money .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="user-money" lay-title="支付中心">
    <form class="layui-form" action="" lay-filter="user-money-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">用户名称：</label>
            <div class="layui-input-block">
                <input type="text" name="username" maxlength="20" lay-verify="required"
                       autocomplete="off" class="layui-input" data-th-value="${user.username}" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">充值金额：</label>
            <div class="layui-input-block">
                <input type="text" name="money" minlength="1" maxlength="10" lay-verify="required|number"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">支付密码：</label>
            <div class="layui-input-block">
                <input type="text" name="password" autocomplete="off" class="layui-input"
                       lay-verify="required|number" placeholder="支付密码就是用户登录密码">
            </div>
        </div>

        <div class="layui-form-item" style="position: absolute;bottom: -2rem;right: 2rem">
            <button class="layui-btn layui-btn-normal" lay-filter="user-money-form-submit" id="submit" lay-submit>支付</button>
            <button class="layui-btn layui-btn-danger" lay-filter="user-money-form-out" id="out">退出</button>
        </div>
    </form>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['jquery','form', 'febs','validate'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            $view = $('#user-money-form'),
            validate = layui.validate;

        form.verify(validate);
        form.render();

        /*因为后端用MD5测试遇到bug，就直接前端判断了*/
        form.on('submit(user-money-form-submit)', function (data) {
            console.log(data.field);
            if (data.field.password === '123456') {
                febs.post(ctx + 'user/money/toPay/' + data.field.money + '/' + data.field.password, function () {
                    layer.closeAll();
                    febs.alert.success('充值成功');
                });
            } else {
                febs.alert.error('支付密码错误');
                return false;
            }
        });

        $('#out').on('click', function () {
            layer.closeAll();
        });
    });
</script>